<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="70%" :before-close="clearForm">
      <el-form
        :model="goodsForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类目选择" prop="category">
          <el-button type="primary" @click="innerVisible = true">类目选择</el-button>
          <span style="margin-left: 10px">{{ goodsForm.category }}</span>
        </el-form-item>

        <el-form-item label="商品名称" prop="title">
          <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
          <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点" prop="sellPoint">
          <el-input v-model="goodsForm.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-button type="primary" @click="innerVisibleImg = true">上传图片</el-button>
          <img :src="goodsForm.image" height="200px" style="margin-left: 10px" alt="" />
        </el-form-item>
        <el-form-item label="商品描述" prop="descs">
          <WangEditor ref="myEditor" @sendEditor="sendEditor" />
        </el-form-item>
        <!-- 规格参数配置 -->
        <el-form-item label="规格参数配置" v-show="isShow">
          <el-form ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
            <el-form-item
              v-for="(item, index) in groups"
              :label="item.title"
              :key="index"
              :prop="item.value"
            >
              <el-input v-model="item.value"></el-input>
              <!-- 内层的表单项 -->
              <el-form-item
                v-for="(ele, i) in item.children"
                :label="ele.title"
                :key="i"
                :prop="ele.value"
              >
                <el-input v-model="ele.value"></el-input>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-form-item>
      </el-form>

      <!-- 弹框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearForm">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>

      <!-- 1. 内弹框--- 类目选择 -->
      <el-dialog width="40%" title="类目选择" :visible.sync="innerVisible" append-to-body>
        <TreeGoods @sendTreeData="sendTreeData" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="showTreeData">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 2. 内弹框 --- 上传图片 -->
      <el-dialog width="40%" title="上传图片" :visible.sync="innerVisibleImg" append-to-body>
        <UploadImg @sendImg="sendImg" ref="upload" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisibleImg = false">取 消</el-button>
          <el-button type="primary" @click="showImg">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import TreeGoods from './TreeGoods.vue'
import UploadImg from './Upload.vue'
import WangEditor from './WangEditor.vue'
export default {
  props: {
    title: {
      type: String,
      default: '添加商品'
    },
    rowData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  components: {
    TreeGoods,
    UploadImg,
    WangEditor
  },
  data() {
    return {
      isShow: false, //是否显示规格参数配置
      dialogVisible: false,
      innerVisible: false,
      innerVisibleImg: false,
      treeData: {},
      imgUrl: '',
      goodsForm: {
        id: '',
        title: '',
        price: '',
        num: '',
        sellPoint: '',
        image: '',
        descs: '',
        cid: '',
        category: ''
      },
      groups: [],
      rules: {
        title: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        num: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      }
    }
  },
  watch: {
    rowData(val) {
      this.goodsForm = val
      //设置富文本编辑的数据内容
      this.$nextTick(() => {
        this.$refs.myEditor.editor.txt.html(val.descs)
      })
      //是否显示规格配置参数----------------------
      if (val.paramsInfo) {
        //显示规格参数
        this.isShow = true
        this.groups = JSON.parse(val.paramsInfo)
      }
    }
  },
  methods: {
    sendEditor(val) {
      this.goodsForm.descs = val
    },

    sendImg(val) {
      this.imgUrl = val
    },

    showImg() {
      this.innerVisibleImg = false
      this.goodsForm.image = this.imgUrl
      this.$refs.upload.fileList = []
    },

    showTreeData() {
      this.innerVisible = false
      this.goodsForm.category = this.treeData.name
      this.goodsForm.cid = this.treeData.cid
      this.$api
        .categoryData({
          cid: this.treeData.cid
        })
        .then((res) => {
          if (res.data.status === 200) {
            //有类目规格配置参数-------------
            this.isShow = true
            //存储规格参数
            let result = res.data.result[res.data.result.length - 1]
            this.groups = JSON.parse(result.paramData)
          } else {
            this.isShow = false
          }
        })
    },

    sendTreeData(val) {
      this.treeData = val
    },
    close() {
      this.$emit('changeDialog')
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { title, cid, category, sellPoint, price, num, descs, image, id } = this.goodsForm
          if (this.title === '添加商品') {
            this.$api
              .addGoods({
                title,
                cid,
                category,
                sellPoint,
                price,
                num,
                descs,
                image,
                paramsInfo: JSON.stringify(this.groups)
              })
              .then((res) => {
                if (res.data.status === 200) {
                  this.$parent.http(1) // 更新父组件列表数据
                  this.$message({
                    message: '恭喜你，添加商品成功',
                    type: 'success'
                  })
                  this.clearForm()
                } else {
                  this.$message.error('添加商品失败')
                }
              })
          } else {
            this.$api
              .updateGoods({
                id,
                title,
                cid,
                category,
                sellPoint,
                price,
                num,
                descs,
                image,
                paramsInfo: JSON.stringify(this.groups)
              })
              .then((res) => {
                if (res.data.status === 200) {
                  this.$parent.http(1) //更新父组件列表数据
                  this.$message({
                    message: '恭喜你，修改商品成功',
                    type: 'success'
                  })
                  this.clearForm()
                } else {
                }
                this.$message.error('修改商品失败')
              })
          }
        } else {
          return false
        }
      })
    },

    clearForm() {
      this.dialogVisible = false
      this.goodsForm = {
        title: '',
        price: '',
        num: '',
        sellPoint: '',
        image: '',
        descs: '',
        cid: '',
        category: ''
      }
      this.$refs.myEditor.editor.txt.clear()
      this.groups = []
      this.isShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.line {
  text-align: center;
}
</style>
